<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="noticeWrapper">
      <div class="timeTop">
        <div class="timeTop-left">
          <h3>{{firstDetail.assigneeName}}</h3>
          <span>{{firstDetail.startTime | time}} 浏览量：{{detail.views}}次</span>
          <p>{{detail.description}}</p>
        </div>
        <div class="timeTop-right" v-for='(item,index) in detail.photo' :key='index'>
          <img v-if='index===0' :src="baseUrl+'image'+item" alt="" />
        </div>
      </div>
      <div class="timeHappenAddress">
        {{detail.happenAddress}}
      </div>
      <div class="timeWaterNum">
        流水号：{{detail.serialNumber}}
        <span class="timeStatus pull-right">
         {{detail.eventStatus | status}}
        </span>
        <span class="white pull-right">
          {{detail.eventStatus | status}}
        </span>
      </div>
      <div class="timeAxisWrapper">
        <ul>
          <li v-for='(item,index) in processingRecords' :key='index'>
            <div class="itemTop">
              {{item.startTime | time}}
              --{{item.taskName}}
            </div>
            <div class="itemMain">
              <div class="itemNum">{{index+1}}</div>
              <div class="itemRight">
                <h3>{{item.assigneeName}}</h3>
                <p v-for='(com,index) in item.comments' :key='index'>{{index+1}}、{{com}}</p>
                <div class="imgList">
                  <span class="imgLi" v-for='(img,index) in item.photo' :key='index'><img :src="baseUrl+'image'+img" alt="" /></span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Lib from '@/assets/js/Lib'
import { getHistoricEvent, findEventDetail } from '@/assets/js/ApiUtil'
import { setTimes } from '@/assets/js/Utils'
import App from '@/assets/js/conf'
export default {
  name: 'noticeDetail',
  data () {
    return {
      title: '时间轴',
      detail: {},
      processingRecords: [],
      firstDetail: {},
      baseUrl: App.baseUrl,
    }
  },
  components: {
  },
  mounted () {
    let id = this.getQueryVariable('id')
    let procesInsId = this.getQueryVariable('procesInsId')
    this.findEventData(id)
    this.getHistorictData(procesInsId)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    findEventData (id) {
      findEventDetail(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.detail = data
          this.detail.photo = this.toArray(this.detail.photo)
          // this.getOptions(data.gridId)
        }
      })
    },
    getHistorictData (id) {
      getHistoricEvent(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.processingRecords = data.historicTaskVo
          for (let i = 0; i < this.processingRecords.length; i++) {
            this.processingRecords[i].photo = this.toArray(this.processingRecords[i].photo)
            this.processingRecords[i].record = this.toArray(this.processingRecords[i].record)
          }
          this.firstDetail = this.processingRecords[0]
        }
      })
    },
    toArray (string) {
      if (string) {
        return string.split(',')
      } else {
        return []
      }
    }
  },
  computed: {
    publishDate () {
      if (this.detail.reportTime) {
        return setTimes(this.detail.updateTime)
      } else {
        return ''
      }
    }
  },
  filters: {
    time (timer) {
      if (timer) {
        let setDb = function (num) {
          // 补零操作
          if (num < 10) {
            return '0' + num
          } else {
            return '' + num
          }
        }
        var time = new Date(timer)
        var year = time.getFullYear() // 年
        var mon = setDb(time.getMonth() + 1) // 0
        var day = setDb(time.getDate()) // 24
        var hour = setDb(time.getHours()) // 时
        var min = setDb(time.getMinutes()) // 分
        var sec = setDb(time.getSeconds()) // 秒
        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec
      } else {
        return '00-00-00'
      }
    },
    status (value) {
      if (value) {
        if (value === 'inProcess') {
          return '办理中'
        } else if (value === 'end') {
          return '已办结'
        }
      } else {
        return '未知'
      }
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto
}
.noticeWrapper {
  padding:0 10px
}
.timeTop {
  display: flex;
  padding:8px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.timeTop-left {
  flex: 1
}
.timeTop-left h3 {
  font-size: 16px;
  font-weight: normal
}
.timeTop-left span {
  font-size: 14px
}
.timeTop-left p {
  padding: 5px 0;
  font-size: 14px;
  color: red;
  line-height: 180%
}
.timeTop-right {
  flex: 0 0 80px;
  width: 80px
}
.timeTop-right img {
  width: 100%
}
.timeHappenAddress {
  padding:10px 0px;
  padding-left: 40px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  background: url('~@/assets/images/posi.png') no-repeat left center;
  border-bottom: 1px solid #dbdbdb
}
.timeWaterNum {
  position:relative;
  height: 40px;
  padding: 0 10px;
  padding-right: 0;
  line-height: 40px;
  background: cornflowerblue;
  font-size: 16px;
  color: #fff
}
.timeStatus {
  position: relative;
  background: red;
  padding: 0 10px;
  padding-left: 20px;
  border-radius: 20px 0 0px 20px;
  z-index: 1;
}
.white {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  background: #ffffff;
  padding: 0 14px;
  padding-left: 20px;
  border-radius: 20px 0 0px 20px;
}
.imgLi {
  display: inline-block;
   width: 100px;
  height: 100px;
}
.imgLi img{
  width: 100px;
  height: 100px;
}
.timeAxisWrapper {
  padding-top: 10px
}
.timeAxisWrapper li {
  margin-bottom: 10px;
  border: 1px solid #dbdbdb
}
.itemTop {
  height: 30px;
  line-height: 30px;
  padding:0 10px;
  font-size: 14px;
  color: #333;
  background: rgba(17, 193, 243,0.5)
}
.itemMain {
  display: flex;
  padding: 10px;
}
.itemNum {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  padding-top: 5px;
  margin-right: 10px;
  background: url('~@/assets/images/step.png') no-repeat center center;
  text-align: center;
  color: #fff;
  font-size: 24px;
}
.itemRight {
  flex: 1px;
}
.itemRight h3 {
  margin-bottom: 8px;
  font-size: 16px;
}
.itemRight p {
  margin-bottom: 10px;
  background: #eee;
  border: 1px solid #dbdbdb;
  padding: 8px;
  color: red;
  font-size: 14px
}
</style>
